<template>
  <div class="chatMain">
    <!--聊天默认界面-->
    <div class="flex flex-col" v-if="!transformChat">
      <el-image :src="avatar" class="chatAvatar"></el-image>
      <div style="margin-top: 4%; margin-left: 1%; font-weight: 600">
        Hey，{{ username }}！
      </div>
      <div style="margin-top: 1%; margin-left: 1%; font-weight: lighter">
        Please select a chat to start messaging.
      </div>
    </div>
    <div v-if="transformChat">
      <!--聊天界面表头-->
      <div class="chatHeader">
        <el-image
          :src="topUserInfo.image"
          class="chatFriendAvatar"
          style="position: absolute"
          @click="toUserPersonal()"
        ></el-image>
        <div class="chatFriendName">{{ topUserInfo.name }}</div>
        <div class="chatFriendState">{{ topUserInfo.state }}</div>
        <div class="chatFriendInfo" v-if="listType === 1">
          <el-popconfirm
            title="你想要退出该群组吗"
            @confirm="exitGroup"
            confirm-button-text="确定"
            cancel-button-text="取消"
            cancel-button-type="danger"
          >
            <template #reference>
              <el-image
                :src="require('@/assets/chat/exit.png')"
                class="chatFriendInfo_icon_add"
                style="left: 90%; top: 30%; position: absolute"
              ></el-image>
            </template>
          </el-popconfirm>
          <el-popconfirm
            title="请选择处理方式"
            v-for="(item, index) in topUserInfo.groupImageList"
            @confirm="addGroupFriend(item)"
            @cancel="kickGroup(item, index)"
            width="200px"
            :key="item"
            confirm-button-text="添加好友"
            cancel-button-text="踢出群组"
            cancel-button-type="danger"
          >
            <template #reference>
              <el-image
                :src="item.image"
                class="chatFriendInfo_group"
                :style="{
                  left: `${(index + 1) * 12}%`,
                  top: `${20}%`,
                  position: 'absolute',
                }"
              ></el-image>
            </template>
          </el-popconfirm>
        </div>
        <div class="chatFriendInfo" v-if="listType === 2">
          <el-popconfirm
            title="你想要和他建立好友关系吗？"
            v-if="sendCount >= 20"
            @confirm="addFriend"
            @cancel="deleteFriend"
            confirm-button-text="同意"
            cancel-button-text="拒绝"
            cancel-button-type="danger"
          >
            <template #reference>
              <el-image
                :src="require('@/assets/chat/add.png')"
                class="chatFriendInfo_icon_add"
                style="left: 1%; top: 30%; position: absolute"
              ></el-image>
            </template>
          </el-popconfirm>
          <el-image
            :src="require('@/assets/chat/sex.png')"
            class="chatFriendInfo_icon"
            v-if="sendCount >= 5"
            style="position: absolute"
          ></el-image>
          <div
            class="chatFriendInfo_text"
            style="left: 19%; top: 30%"
            v-if="sendCount >= 5"
          >
            {{ topUserInfo.sex }}
          </div>
          <el-image
            :src="require('@/assets/chat/birthday.png')"
            class="chatFriendInfo_icon"
            style="left: 27%; top: 30%; position: absolute"
            v-if="sendCount >= 10"
          ></el-image>
          <div
            class="chatFriendInfo_text"
            style="left: 33%; top: 30%"
            v-if="sendCount >= 10"
          >
            {{ topUserInfo.birthday }}
          </div>
          <el-image
            :src="require('@/assets/chat/specialty.png')"
            class="chatFriendInfo_icon"
            style="left: 52%; top: 30%; position: absolute"
            v-if="sendCount >= 15"
          ></el-image>
          <div
            class="chatFriendInfo_text"
            style="left: 58%; top: 30%"
            v-if="sendCount >= 15"
          >
            {{ topUserInfo.major }}
          </div>
          <el-image
            :src="require('@/assets/chat/hobbies.png')"
            class="chatFriendInfo_icon"
            style="left: 77%; top: 30%; position: absolute"
            v-if="sendCount >= 20"
          ></el-image>
          <div
            class="chatFriendInfo_text"
            style="left: 83%; top: 30%"
            v-if="sendCount >= 20"
          >
            {{ topUserInfo.hobbies }}
          </div>
        </div>
      </div>
      <!--聊天记录-->
      <div class="infinite-list" ref="main">
        <div v-for="item in messageListChat" :key="item" ref="content">
          <div class="chatBox" v-if="item.type === 0">
            <el-image :src="item.image" class="chatBox_Avatar"></el-image>
            <div class="chatBox_Message">{{ item.content }}</div>
          </div>
          <div class="chatBox1" v-if="item.type === 1">
            <el-image :src="item.image" class="chatBox_Avatar1"></el-image>
            <div class="chatBox_Message1">{{ item.content }}</div>
          </div>
        </div>
      </div>
      <!--发送框-->
      <div class="sendBox">
        <textarea
          class="inputMessage"
          placeholder="请输入"
          v-model="sendMessage"
          type="textarea"
          @keydown="send"
          @keyup="clear"
        />
      </div>
    </div>
  </div>
</template>

<script>
import chatAPI from "@/api/chatAPI";
export default {
  props: [
    "transformChat",
    "topUserInfo",
    "listType",
    "sendCount",
    "messageListChat",
  ],

  data() {
    return {
      //头像url
      avatar: this.$store.getters["user/getUserAvatar"],

      //用户名称
      username: this.$store.getters["user/getUserName"],

      //发送的数据
      sendMessage: "",

      //是否正在输入
      isInputing: false,
    };
  },

  methods: {
    /**
     * @description 发送消息
     */
    async send(e) {
      this.isInputing = true;
      if (e.keyCode === 13) {
        let data = {
          noteId: null,
          messageType: null,
          fromUser: this.$store.getters["user/getUserId"],
          toUser: null,
          fromGroup: null,
          toGroup: null,
          msg: this.sendMessage,
        };
        if (this.listType === 0) {
          data.messageType = 1;
          data.toUser = this.topUserInfo.id;
        }
        if (this.listType === 1) {
          data.messageType = 2;
          data.toGroup = this.topUserInfo.id;
        }
        if (this.listType === 2 || this.listType === 3) {
          data.messageType = 3;
          data.noteId = this.topUserInfo.id;
        }
        this.$socket.send(JSON.stringify(data));
        let data1 = {
          type: 1,
          content: this.sendMessage,
          image: this.avatar,
        };
        if (this.sendMessage !== "") {
          await this.messageListChat.push(data1);
          this.$refs.main.scrollTop = this.$refs.main.scrollHeight;
        }
      }
    },

    /**
     * @description 回车清除发消息框内容
     */
    clear(e) {
      if (e.keyCode === 13) {
        this.sendMessage = "";
        this.sendCount++;
        this.isInputing = false;
      }
    },

    /**
     * @description 点击进入对方主页
     */
    toUserPersonal() {
      if (this.listType === 0) {
        this.$router.push({
          path: "/personal",
          query: {
            userId: this.topUserInfo.id,
          },
        });
      }
    },

    /**
     * @description 退出群组
     * @method refreshGroupList 刷新群组列表
     */
    async exitGroup() {
      let data = {
        noteId: this.topUserInfo.id,
      };
      await chatAPI.exitGroup(data).then((res) => {
        this.$parent.exitGroup();
      });
    },

    /**
     * @description 群聊中建立好友关系
     */
    async addGroupFriend(data) {
      if (
        data.userId === this.topUserInfo.publisherId ||
        this.$store.getters["user/getUserId"] === this.topUserInfo.publisherId
      ) {
        let data1 = {
          friendId: data.userId,
        };
        await chatAPI.groupAddFriend(data1).then((res) => {
          this.$message.success("好友申请已经发出");
        });
      }
    },

    /**
     * @description 群组弹窗添加好友相关
     */
    async addGroupFriend_deal(accept) {
      let data1 = {
        friendId: this.addFriendId,
        accept: accept,
      };
      await chatAPI.groupAddFriend_deal(data1).then((res) => {
        this.addFriendVisible = false;
      });
    },

    /**
     * @description 踢出群组
     */
    async kickGroup(data, index) {
      this.$parent.kickGroup(data, index);
    },

    /**
     * @description 建立好友
     */
    async addFriend() {
      let data = {
        noteId: this.topUserInfo.id,
      };
      await chatAPI.setFriend(data).then((res) => {
        console.log(res);
        this.$message.warning("等待对方确认");
      });
    },

    /**
     * @description 拒绝建立好友
     */
    async deleteFriend() {
      let data = {
        noteId: this.topUserInfo.id,
      };
      await chatAPI.refuseFriend(data).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
.chatHeader {
  height: 80px;
  border-bottom: #21aa93 solid 1px;
}

.chatFriendAvatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  left: 5%;
  top: 2.3%;
}

.chatFriendAvatar:hover {
  cursor: pointer;
}

.chatFriendName {
  position: absolute;
  left: 11%;
  top: 2.3%;
  color: #555555;
  font-weight: bold;
}

.chatFriendState {
  position: absolute;
  left: 11%;
  top: 6%;
  font-size: 13px;
  color: #555555;
  font-weight: lighter;
}

.chatFriendInfo {
  width: 80%;
  height: 80px;
  position: relative;
  margin-left: 18%;
}

.chatFriendInfo_icon_add {
  width: 30px;
  height: 30px;
  position: absolute;
}

.chatFriendInfo_icon_add:hover {
  cursor: pointer;
}

.chatFriendInfo_icon {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 13%;
  top: 30%;
}

.chatFriendInfo_group {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
}

.chatFriendInfo_group:hover {
  cursor: pointer;
}

.chatFriendInfo_text {
  font-size: 22px;
  font-family: "KaiTi";
  position: absolute;
}

.chatMain {
  width: 68%;
  position: relative;
}

.infinite-list {
  height: 500px;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: auto;
  border-bottom: #21aa93 solid 1px;
}

.chatBox {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
}

.chatBox_Avatar {
  left: 3%;
  top: 10%;
  width: 40px;
  height: 40px;
  margin-top: 2%;
  border-radius: 50%;
  border: #21aa93 solid 3px;
}

.chatBox_Message {
  display: flex;
  background: #1770c3;
  color: #fff;
  font-family: "KaiTi";
  border-radius: 10px;
  border-top-left-radius: 0px;
  max-width: 40%;
  padding: 0.8%;
  left: 7.5%;
  top: 26%;
  text-align: left;
  box-shadow: darkgrey 5px 5px 15px -5px;
  margin-top: 5.5%;
  margin-left: 3%;
}

.chatBox1 {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  flex-direction: row-reverse;
}

.chatBox_Avatar1 {
  left: 0%;
  top: 10%;
  margin-right: 3%;
  width: 40px;
  height: 40px;
  margin-top: 2%;
  border-radius: 50%;
  border: #21aa93 solid 3px;
}

.chatBox_Message1 {
  display: flex;
  background: #1770c3;
  color: #fff;
  font-family: "KaiTi";
  border-radius: 10px;
  border-top-right-radius: 0px;
  max-width: 40%;
  padding: 0.8%;
  left: 7.5%;
  top: 26%;
  text-align: left;
  box-shadow: darkgrey 5px 5px 15px -5px;
  margin-top: 5.5%;
  margin-left: 3%;
}

.sendBox {
  height: 101px;
  position: relative;
}

.inputMessage {
  position: absolute;
  border: none;
  outline: none;
  height: 95px;
  width: 100%;
  left: 0%;
  top: 2%;
}
</style>
